<template>
	<view class="user u-skeleton" :class="themeName">
		<view class="user-info flex-col">
			<!-- #ifndef  H5 -->
			<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
				<u-navbar title="运营商中心" :title-bold="true" :is-fixed="false" :border-bottom="false"
					:background="{ background: 'rgba(256,256, 256,' + percent + ')' }"
					:back-icon-color="percent > 0.5 ? '#000' : '#fff'" :title-color="percent > 0.5 ? '#000' : '#fff'">
				</u-navbar>
			</u-sticky>
			<!-- #endif -->
			<view class="flex row-right p-r-20 m-t-30">
				<view class="flex" @click="shareShow=true">
					<u-icon name="share" size="38" color="#fff" />
					<text class="white m-l-10">{{$zhTran('运营商分享')}}</text>
				</view>
			</view>
			<view class="user-top flex flex-1">
				<view class="logo flex row-center col--center">
					<image :src="$getImageUri('resource/image/shopapi/default/icon_group2.png')" mode="widthFix" />
				</view>
				<view class="m-l-30 flex-1">
					<view class="xxl white bold">{{cspplInfo.name}}</view>
					<view class="user-id m-t-10">
						<view class="xs m-r-20 white">{{$zhTran('运营商负责人')}}：{{cspplInfo.leader_info.nickname}}</view>
						<view class="xs m-t-10 white">{{$zhTran('联系电话')}}：{{cspplInfo.leader_info.mobile}}</view>
					</view>
				</view>
			</view>
			<u-gap height="80"></u-gap>
		</view>
		<view class="body p-30" :style="{
			top: '-70rpx'
		}">

			<view class="saleman flex m-b-20">
				<view style="width: 80rpx;height: 80rpx;">
					<image class="avatar" :src="userInfo.avatar" mode="widthFix" />
				</view>
				<view class="m-l-30">
					<view class="nr m-r-20 bold flex">
						<text>{{$zhTran('当前用户')}}：{{userInfo.nickname}}</text>
						<view class="badge m-l-10 normal" :style="{
							backgroundImage: `url(${$getImageUri('resource/image/shopapi/uniapp/leader-badge.png')})`
						}">{{$zhTran('业务员')}}</view>
					</view>
					<view class="xs m-t-10 muted">{{$zhTran('联系电话')}}：{{userInfo.mobile}}</view>
				</view>
			</view>

			<view class="item-tab">
				<view class="title">{{$zhTran('运营商业绩')}}</view>
				<view class="data-tab flex row-between">
					<view>
						<view class="number">{{cspplInfo.order_profit_wait}}</view>
						<view class="desc">{{$zhTran('待确认收益')}}</view>
					</view>
					<view>
						<view class="number">{{cspplInfo.order_amount_month}}</view>
						<view class="desc">{{$zhTran('本月订单金额')}}</view>
					</view>
					<view>
						<view class="number">{{cspplInfo.order_profit_month}}</view>
						<view class="desc">{{$zhTran('本月收益金额')}}</view>
					</view>
					<view>
						<view class="number">{{cspplInfo.order_profit_done}}</view>
						<view class="desc">{{$zhTran('已确认收益')}}</view>
					</view>
				</view>
			</view>

			<view class="item-tab">
				<view class="title">{{$zhTran('运营商数据')}}</view>
				<view class="data-tab flex row-between">
					<view>
						<view class="number">{{cspplInfo.user_count}}</view>
						<view class="desc">{{$zhTran('用户数')}}</view>
					</view>
					<view>
						<view class="number">{{cspplInfo.order_count}}</view>
						<view class="desc">{{$zhTran('订单数')}}</view>
					</view>
					<view>
						<view class="number">{{cspplInfo.order_amount}}</view>
						<view class="desc">{{$zhTran('订单金额')}}</view>
					</view>
					<view>
						<view class="number">{{cspplInfo.order_profit}}</view>
						<view class="desc">{{$zhTran('订单收益')}}</view>
					</view>
				</view>
			</view>

			<view class="item-tab">
				<view class="title">{{$zhTran('其他功能')}}</view>
				<view class="data-body">

					<view class="flex row-between m-b-20">
						<view class="data-card flex row-between" @click="toSalemanList">
							<view>
								<view class="title">{{$zhTran('业务员管理')}}</view>
								<view class="desc">{{$zhTran('添加/编辑/删除')}}</view>
							</view>
							<image class="icon" :src="$getImageUri('resource/image/shopapi/default/icon-01.png')"
								mode="widthFix" />
						</view>
						<view class="data-card flex row-between" @click="toProfitList">
							<view>
								<view class="title">{{$zhTran('订单收益')}}</view>
								<view class="desc">{{$zhTran('查看订单收益')}}</view>
							</view>
							<image class="icon" :src="$getImageUri('resource/image/shopapi/default/icon-02.png')"
								mode="widthFix" />
						</view>
					</view>

					<view class="flex row-between m-b-20">
						<view class="data-card flex row-between" @click="toClientList">
							<view>
								<view class="title">{{$zhTran('客户管理')}}</view>
								<view class="desc">{{$zhTran('查看客户数据')}}</view>
							</view>
							<image class="icon" :src="$getImageUri('resource/image/shopapi/default/icon-03.png')"
								mode="widthFix" />
						</view>
						<view class="data-card flex row-between" @click="toChartData">
							<view>
								<view class="title">{{$zhTran('数据报表')}}</view>
								<view class="desc">{{$zhTran('查看各项数据')}}</view>
							</view>
							<image class="icon" :src="$getImageUri('resource/image/shopapi/default/icon-04.png')"
								mode="widthFix" />
						</view>
					</view>

					<view class="flex row-between">
						<view class="data-card flex row-between" @click="toPullUserList">
							<view>
								<view class="title">{{$zhTran('拉新管理')}}</view>
								<view class="desc">{{$zhTran('查看拉新数据')}}</view>
							</view>
							<image class="icon" :src="$getImageUri('resource/image/shopapi/default/icon-05.png')"
								mode="widthFix" />
						</view>
					</view>

				</view>
			</view>

		</view>

		<u-popup v-model="sharePosterVisible" mode="center" width="90%">
			<share-poster ref="poster" :options="options" @success="handleSuccess" @complete="handleComplete" />
			<u-gap height="100"></u-gap>
		</u-popup>
		<view class="share-btns" v-if="sharePosterVisible">
			<view class="text-center">
				<view class="title">{{$zhTran('- 转发好友或保存至手机 -')}}</view>
				<view class="desc">{{$zhTran('保存海报后，即可分享给客户、客户群和微信朋友圈')}}</view>
				<view class="close">
					<u-icon name="close" color="#666666" @tap="sharePosterVisible = false" />
				</view>
			</view>
			<view class="flex row-between">
				<view class="btns share" @click="saveImageToOther">{{$zhTran('转发好友')}}</view>
				<view class="btns saveImg" @click="saveImageToAlbum">{{$zhTran('保存至手机')}}</view>
			</view>
		</view>
		<loading-view v-show="loading"></loading-view>

		<u-action-sheet-circle :list="list" v-model="shareShow" @click="actionSheet">
		</u-action-sheet-circle>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		apiCitySupplierInfo,
	} from "@/api/citysupplier"
	import {
		apiMnpCitySupplierQrCode
	} from "@/api/app";
	import sharePoster from "@/bundle2/pages/citysupplier/share_poster.vue";
	export default {
		components: {
			sharePoster,
		},

		data() {
			return {
				cspplInfo: {},
				percent: 0,
				list: [{
					text: this.$zhTran('分享海报'),
					color: 'rgba(56, 56, 56, 1)',
					fontSize: 28,
					icon: 'photo',
					iconColor: '#fff',
					iconSize: 32,
					iconBgColor: 'rgba(51, 175, 41, 1)',
					iconBgSize: 64,
					iconCircleColor: 'rgba(246, 252, 248, 1)',
					iconCircleSize: 138,
				}],
				shareShow: false,
				loading: true,
				options: {
					avatar: '',
					user_name: '',
					csppl_name: '',
					share_image: '',
					qr_code: ''
				},
				imgPath: '',
				sharePosterVisible: false,
			}
		},
		methods: {
			...mapActions(['getUser']),
			getCitySupplierInfo() {
				apiCitySupplierInfo().then(res => {

					this.cspplInfo = this.$zhTran(res);
				})
			},
			toSalemanList() {
				this.$Router.push({
					path: '/bundle2/pages/citysupplier/saleman_list',
					query: {
						csppl_id: this.cspplInfo.id,
						user_id: this.userInfo.id,
						is_leader: this.userInfo.id == this.cspplInfo.leader_info.id ? 1 : 0,
					}
				})
			},
			toClientList() {
				this.$Router.push({
					path: '/bundle2/pages/citysupplier/client_list',
					query: {
						csppl_id: this.cspplInfo.id,
					}
				})
			},
			toProfitList() {
				this.$Router.push({
					path: '/bundle2/pages/citysupplier/profit_list',
					query: {
						csppl_id: this.cspplInfo.id,
					}
				})
			},
			toChartData() {
				this.$Router.push({
					path: '/bundle2/pages/citysupplier/chart_data',
					query: {
						csppl_id: this.cspplInfo.id,
					}
				})
			},
			toPullUserList() {
				this.$Router.push({
					path: '/bundle2/pages/citysupplier/pull_user_data',
					query: {
						csppl_id: this.cspplInfo.id,
						csppl_name: this.cspplInfo.name,
					}
				})
			},
			onPageScroll(e) {
				const top = uni.upx2px(100)
				const {
					scrollTop
				} = e
				this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
			},
			actionSheet(event) {
				this.shareShow = false
				this.loading = true
				this.options = {
					avatar: this.userInfo.avatar,
					user_name: this.userInfo.nickname,
					csppl_name: this.cspplInfo.name,
					share_image: this.cspplInfo.apply_image,
				}
				this.options = this.$zhTran(this.options)
				this.getPoster()
			},
			async getPoster() {
				try {
					const res = await Promise.all([
						// #ifdef MP-WEIXIN
						apiMnpCitySupplierQrCode({
							csppl_id: this.cspplInfo.id,
						})
						// #endif
					]);
					console.log('res', res)
					// #ifdef MP-WEIXIN
					this.options.qr_code = res[0]?.qr_code;
					// #endif
					console.log('options', this.options)
					this.$nextTick(() => {
						this.$refs.poster.drawCanvas();
					})
				} catch (e) {
					this.$toast({
						title: e,
					});
				} finally {
					this.loading = false
				}
			},
			handleSuccess(val) {
				console.log('handleSuccess', this.imgPath)
				this.imgPath = val;
				this.sharePosterVisible = true
				this.loading = false
			},
			handleComplete() {
				console.log('handleComplete')
				this.loading = false
			},
			saveImageToOther() {
				console.log('imgPath', this.imgPath)
				uni.showShareImageMenu({
					path: this.imgPath
				})
			},
			saveImageToAlbum() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.imgPath,
					success: (res) => {
						this.$toast({
							title: this.$zhTran("保存成功"),
						});
					},
					fail: (err) => {
						this.$toast({
							title: this.$zhTran("保存失败"),
						});
					},
				});
				// #endif
				// #ifdef H5
				this.$toast({
					title: this.$zhTran("请长按图片保存"),
				});
				// #endif
			},
			cancelShare() {
				this.sharePosterVisible = false
			}
		},
		computed: {},
		watch: {},
		onLoad() {
			this.getUser().then((res) => {
				console.log('is_csppl_suplier', res.is_csppl_suplier)
				if (res.is_csppl_suplier == 1) {
					this.getCitySupplierInfo()
					this.loading = false
				} else {
					setTimeout(() => {
						if (res.is_csppl_suplier == -1) {
							this.$Router.replace('/bundle2/pages/citysupplier/apply')
						} else {
							this.$Router.replace({
								path: '/bundle2/pages/citysupplier/apply_status',
								query: {
									status: res.is_csppl_suplier
								}
							})
						}
					}, 200)
				}
			})
		},
	}
</script>

<style lang="scss" scoped>
	.user-info {
		background-color: rgba(64, 115, 250, 1);
		background-size: 100% auto;
		background-repeat: no-repeat;
		box-sizing: border-box;

		&.u-skeleton-rect {
			height: 518rpx;
		}

		.user-top {
			padding: 0 30rpx;
			// #ifdef  H5
			padding-top: 30rpx;

			// #endif
			.logo {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				background-color: #fff;

				image {
					width: 60rpx;
				}
			}
		}
	}

	.body {
		position: relative;

		.saleman {
			width: 100%;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			&.u-skeleton-rect {
				height: 152rpx;
			}

			.badge {
				background-repeat: no-repeat;
				background-size: 100% 100%;
				color: #fff;
				padding: 6rpx 15rpx;
				font-size: 22rpx;
			}

			.avatar {
				width: 80rpx;
				border-radius: 50%;

			}
		}

		.item-tab {
			margin-bottom: 30rpx;

			.title {
				color: rgba(47, 47, 47, 1);
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.data-tab {
				padding: 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
				text-align: center;

				.number {
					color: rgba(58, 58, 58, 1);
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.desc {
					color: rgba(128, 128, 128, 1);
					font-size: 22rpx;
				}
			}

			.data-body {

				.data-card {
					padding: 30rpx;
					border-radius: 20rpx;
					background-color: #fff;
					width: 48%;

					&.u-skeleton-rect {
						height: 160rpx;
					}

					.icon {
						width: 80rpx;
					}

					.title {
						color: rgba(58, 58, 58, 1);
						font-size: 30rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.desc {
						color: rgba(128, 128, 128, 1);
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.share-btns {
		position: fixed;
		z-index: 9999999;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(240rpx + constant(safe-area-inset-bottom));
		height: calc(240rpx + env(safe-area-inset-bottom));
		padding: 36rpx 36rpx constant(safe-area-inset-bottom) 36rpx;
		padding: 36rpx 36rpx env(safe-area-inset-bottom) 36rpx;
		background-color: #fff;

		.close {
			position: absolute;
			right: 0;
			top: 0;
			padding: 40rpx;
		}

		.title {
			font-size: 32rpx;
			color: rgba(56, 56, 56, 1);
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.desc {
			font-size: 24rpx;
			color: rgba(128, 128, 128, 1);
			margin-bottom: 20rpx;
		}

		.btns {
			width: 49%;
			padding: 25rpx;
		}

		.share {
			text-align: center;
			background-color: rgba(242, 246, 255, 1);
			color: rgba(64, 115, 250, 1);
		}

		.saveImg {
			text-align: center;
			background-color: rgba(64, 115, 250, 1);
			color: #fff;
		}
	}
</style>